<template>
  <h1>布局组件</h1>
  <!-- 可以使页面的布局跟随页面的宽度变化而变化 -->
  <!-- el-row :gutter：设置了这个布局行中每个元素之间的间距为多少像素 -->
  <el-row :gutter="20">
    <el-col :span="6">测试数据</el-col>
    <el-col :span="6">测试数据</el-col>
    <el-col :span="6">测试数据</el-col>
    <el-col :span="6">测试数据</el-col>
  </el-row>

  <h3>两张图</h3>
  <!-- el-row :gutter：设置了这个布局行中每个元素之间的间距为多少像素 -->
  <el-row :gutter="10">
   <el-col :span="12"><img src="2024.png" style="width:100%;"></el-col>
   <el-col :span="12"><img src="2024.png" style="width:100%;"></el-col>
  </el-row>

  <h3>六张图</h3>
  <!-- el-row :gutter：设置了这个布局行中每个元素之间的间距为多少像素 -->
  <el-row :gutter="10">
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
  </el-row>

  <h3>三张图 宽度为1:2:3</h3>       <!-- 1：2：3  按照这个页面24份分配 -->
  <!-- el-row :gutter：设置了这个布局行中每个元素之间的间距为多少像素 -->
  <el-row :gutter="10">
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="8"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="12"><img src="2024.png" style="width:100%;"></el-col>
  </el-row>

  <h3>8个等分的列,每列显示数字1 2 3 ...8</h3>
  <el-row :gutter="10">
    <el-col :span="3" v-for="i in 8" :key="i">{{i}}</el-col>
    <el-col :span="3" v-for="i in 8" :key="i">{{i}}</el-col>
    <el-col :span="3" v-for="i in 8" :key="i">{{i}}</el-col>
    <el-col :span="3" v-for="i in 8" :key="i">{{i}}</el-col>
    <el-col :span="3" v-for="i in 8" :key="i">{{i}}</el-col>
    <el-col :span="3" v-for="i in 8" :key="i">{{i}}</el-col>
    <el-col :span="3" v-for="i in 8" :key="i">{{i}}</el-col>
    <el-col :span="3" v-for="i in 8" :key="i">{{i}}</el-col>
  </el-row>

  <h3>列偏移</h3>
  <el-row>
    <!-- :offset="2" 列偏移,默认值为0,默认靠左,写几就是向右移动几列 -->
    <el-col :span="20" :offset="2"><img src="rich.jpg" style="width:100%;"></el-col>
  </el-row>
  <!-- 要求：占12列且居中 -->
  <el-row>
    <el-col :span="12" :offset="6"><img src="rich.jpg" style="width:100%;"></el-col>
  </el-row>
  <!-- 布局嵌套 -->
  <el-row>
    <!--  分成左右两侧各12份 边框宽度为5 -->
   <el-col :span="12" style="border: 3px solid #f00;">左侧</el-col>
   <el-col :span="12" style="border: 3px solid #0f0;">
     <!-- 右侧24份再次划分为3份进行分配 -->
     <!-- 嵌套时，一定要把当前元素再看作是一个row,24份,再进行分配!    -->
     <el-row>
       <el-col :span="8" style="border: 3px solid #00f;">1</el-col>
       <el-col :span="8" style="border: 3px solid #ff0;">2</el-col>
       <el-col :span="8" style="border: 3px solid #000;">3</el-col>
     </el-row>
   </el-col>
  </el-row>
</template>

<script setup>

</script>

<style scoped>

</style>